<template>
	<view class="container">
		
		<!-- 此容器会被设置为固定定位， 然后会脱离文档流-->
		<view class="nav-bar">
			<view class="status-bar" :style="{height: getStatusBarHeight() + 'px'}"></view>
			<view class="title-bar" :style="{height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px'}">
				<view class="title">{{ title }}</view>
				<view class="search" @click="toSearchPage">
					<uni-icons type="search" size="21"></uni-icons>
					<view class="text">搜索</view>
				</view>
			</view>
		</view>

		<!-- 仅给此盒子设置状态栏高度和标题栏高度，将首页中的内容挤下去 -->
		<view class="fill" :style="{height: fillBoxHeight + 'px'}">

		</view>
	</view>
</template>

<script setup lang="ts">
import {getTitleBarHeight, getStatusBarHeight, getNavBarHeight, getLeftIconLeft} from '@/utils/system.js'
const fillBoxHeight = getNavBarHeight()

defineProps({
	title: {
		type: String, 
		default: '壁纸'
	}
})
const toSearchPage = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	})
}
</script>

<style lang="scss" scoped>
	.container {
		.nav-bar {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 2; // 置顶
			background:
				// 第一层：竖直方向的透明到白色渐变, #fff 400rpx → 在 400rpx 的位置变成纯白色
				linear-gradient(to bottom, rgba(0, 0, 0, 0), #fff 400rpx),
				// 第二层：水平方向的背景色渐变
				linear-gradient(to right, #beecd8, #f4e2d8);

			.status-bar {
				// border: 1rpx solid red;
			}

			.title-bar {
				// background-color: pink;
				padding: 0 30rpx;
				display: flex;
				align-items: center;

				.title {
					padding-right: 30rpx;
					font-weight: 700;
					font-size: 44rpx;
					color: $text-font-color-1;
				}

				.search {
					display: flex;
					align-items: center;
					border: 1rpx solid white;
					border-radius: 60rpx;
					padding: 10rpx;
					width: 220rpx;
					height: 50rpx;
					fong-size: 28rpx;
					color: #999;
					background-color: rgba(255, 255, 255, 0.4);

					.text {
						padding-left: 10rpx;
					}
				}
			}
		}

		.fill {}
	}
</style>